import React, {Component} from 'react';
import {connect} from "react-redux";
import {addPerson} from "../../redux/actions/person";

class Index extends Component {
    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        this.props.addPerson({name, age})
    }

    render() {
        return (
            <div>
                <h2>我是Person组件</h2>
                <h4>当前和：{this.props.count}</h4>
                <input ref={c => this.nameNode = c} type="text" placeholder='输入名字'/>
                <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄'/>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.personData.map((item, index) => {
                            return <li key={index}>{item.name}---{item.age}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default connect(
    state => ({personData: state.person, count: state.count}),
    //简写
    {
        addPerson,
    }
    // 一般写法
    //dispatch => ({
    //       jia: data => dispatch(createIncrementAction(data)),
    //     jian: data => dispatch(createDecrementAction(data)),
    //   jiaAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
    //})
)(Index)